<template>
	<div id="item">
		<label>
			<input type="checkbox" :checked="itemObj.isFinish" @click="handlerCheck"/>{{itemObj.title}}
			<!-- <input type="text" style="width: 20px;" /> -->
		</label>
		<input class="del_button" type="button" value="删除" @click="delItem" />
	</div>
</template>

<script>
	export default {
		name:'Item',
		props:['itemObj'],
		data() {
			return{};
		},
		methods: {
			delItem(){
				this.$bus.$emit('delData',this.itemObj.id)
			},
			handlerCheck(){
				this.$bus.$emit('handlCheck',this.itemObj.id)
			}
		},
	}
</script>

<style>
	#item{
		padding: 5px;
		width: 200px;
		height: 15px;
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	#item:hover{
		background-color: #ddd;
	}
	#item:hover .del_button{
		display: block;
	}
	.del_button{
		background-color: orange;
		margin-left: auto;
		display: none;
	}
</style>
